@use "sass:math";
.brief-view-type-xs .view-bg {
  @include view-xs-size();
}

.brief-view-type-sm .view-bg {
  @include view-sm-size();
}

.view-focused .view-bg {
  @include view-lg-size();
}

.dv-main-layout {
  .view {
    .view-bg {
      position: absolute;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .view-content {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .view-bg-square {
      background-image: url("/media/layout/view/view-bg-square.png");
    }

    .view-bg-lines {
      background-image: url("/media/layout/view/view-bg-lines.png");
    }

    .view-bg-main {
      opacity: .8;
      background-image: url("/media/layout/view/view-bg-main.png");
    }

    .view-bg-x-rayed {
      background-image: url("/media/layout/view/view-bg-x-rayed.png");
    }

    .view-bg-dec-blue {
      background-image: url("/media/layout/view/view-decorate-blue.png");
    }

    .view-bg-dec-golden {
      background-image: url("/media/layout/view/view-decorate-golden.png");
    }

    .view-bg-glass {
      background-image: url("/media/layout/view/view-front-glasses.png");
    }

    .view-bg-masker {
      background-image: url("/media/layout/view/view-bg-masker.png");
    }
  }
  .view-rt .view-bg, .view-rm .view-bg, .view-rb .view-bg {
    transform: scaleX(-1);
  }

  .view-focused .view-bg-holder, .view-focusing .view-bg-holder, .view-focusing-out .view-bg-holder {
    display: none;
  }

  .view-lt .view-bg-holder, .view-rt .view-bg-holder {
    $width: 433px;
    $height: 317px;
    $drift: 40px;

    width: $width;
    height: $height;

    position: absolute;
    top: 0 - $height + $drift;
    .brief-view-type-xs & {
      left: math.div($view-xs-width - $width, 2)
    }
    .brief-view-type-sm & {
      left: math.div($view-sm-width - $width, 2)
    }

    background: url("/media/layout/view/holder-top.png") no-repeat;
  }

  .view-lb .view-bg-holder, .view-rb .view-bg-holder {
    $width: 551px;
    $height: 385px;
    $drift: 200px;

    width: $width;
    height: $height;

    position: absolute;
    .brief-view-type-xs & {
      top: $view-xs-height - $drift;
      left: math.div($view-xs-width - $width, 2)
    }
    .brief-view-type-sm & {
      top: $view-xs-height - $drift + ($view-pos-normal-xs-bottom-top - $view-pos-normal-sm-bottom-top);
      left: math.div($view-sm-width - $width, 2)
    }

    background: url("/media/layout/view/holder-bottom.png") no-repeat;
  }

  .view-lm .view-bg-holder, .view-rm .view-bg-holder {
    $width: 317px;
    $height: 102px;
    $drift: 50px;

    width: $width;
    height: $height;

    position: absolute;
    top: math.div($view-xs-height - $height, 2) - $drift;

    background: url("/media/layout/view/holder-middle.png") no-repeat;
  }
  .view-lm .view-bg-holder {
    $width: 317px;
    left: 0 - $width;
  }
  .view-rm .view-bg-holder {
    transform: scaleX(-1);
    left: $view-xs-width;
  }
}